import React, { useState, useEffect } from 'react';
import { Card, Tabs, message, Spin } from 'antd';
import { UserOutlined, PictureOutlined, EditOutlined } from '@ant-design/icons';
import { accountService } from '@/services/accountService';
import type { UserProfile } from '@/types/account';
import BasicInfo from './components/BasicInfo';
import AvatarUpload from './components/AvatarUpload';
import EditProfile from './components/EditProfile';
import styles from './Profile.module.css';

const Profile: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [profile, setProfile] = useState<UserProfile | null>(null);

  // 获取用户资料
  const fetchProfile = async () => {
    try {
      setLoading(true);
      const response = await accountService.getProfile();
      setProfile(response.data);
    } catch (error) {
      message.error('获取用户资料失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchProfile();
  }, []);

  // 处理头像更新
  const handleAvatarUpdate = async (avatarUrl: string) => {
    if (profile) {
      try {
        const updatedProfile = { ...profile, avatar: avatarUrl };
        await accountService.updateProfile(updatedProfile);
        message.success('头像更新成功');
        fetchProfile(); // 重新获取用户资料
      } catch (error) {
        message.error('头像更新失败');
      }
    }
  };

  // 处理资料更新
  const handleProfileUpdate = async (data: Partial<UserProfile>) => {
    if (profile) {
      try {
        const updatedProfile = { ...profile, ...data };
        await accountService.updateProfile(updatedProfile);
        message.success('资料更新成功');
        fetchProfile(); // 重新获取用户资料
      } catch (error) {
        message.error('资料更新失败');
      }
    }
  };

  if (loading) {
    return (
      <div className={styles.loadingContainer}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <Card className={styles.profileCard}>
        <Tabs
          defaultActiveKey="basic"
          tabPosition="left"
          className={styles.profileTabs}
          items={[
            {
              key: 'basic',
              label: (
                <span>
                  <UserOutlined />
                  基本信息
                </span>
              ),
              children: <BasicInfo profile={profile} />,
            },
            {
              key: 'avatar',
              label: (
                <span>
                  <PictureOutlined />
                  修改头像
                </span>
              ),
              children: <AvatarUpload onUpdate={handleAvatarUpdate} currentAvatar={profile?.avatar} />,
            },
            {
              key: 'edit',
              label: (
                <span>
                  <EditOutlined />
                  编辑资料
                </span>
              ),
              children: <EditProfile profile={profile} onUpdate={handleProfileUpdate} />,
            },
          ]}
        />
      </Card>
    </div>
  );
};

export default Profile;
